<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>rem</title>
</head>
<script src='http://libs.baidu.com/jquery/1.8.3/jquery.min.js'></script>

<style type="text/css">
html{font-size:64px;}
*{margin:0px; padding:0px;}
body{background:#EEEEEE;}
div.jisuan{width: 100%; height:1.4814rem; line-height: 0.6296rem; background:rgba(0,0,0,0.5); position: absolute; top:0px; font-size:12px;}
div.jisuan input{width: 1.8518rem; height: 0.5555rem; line-height: 0.5555rem; font-size:16px; text-indent: 0.1851rem; border:none; outline: none;}
div.jisuan input.px{margin-left: 0.5555rem;}
div.jisuan span.dy{font-size:14px; color:#fff;}
div.jisuan span.px{font-size:24px; color: #fff;}


div.two{width: 10rem;  height: 9rem; margin:180px auto; background:#fff;}
div.twoTop{width: 9.641rem; line-height: 0px; margin-left: 0.359rem; height: 2.125rem;}
div.twoTop div.com{width: 1.813rem; height: 2.125rem; float:left; line-height: 0px; margin-left: 0.047rem;}
div.twoTop div.com div.comTop{width: 1.625rem; height: 1.141rem; line-height: 0px;margin-top: 0.313rem; background-size:contain; overflow: hidden;}
div.twoTop div.com div.comBot{width: 1.625rem; height: 0.688rem; line-height: 0.688rem; font-size:12px; color:rgb(102, 102, 102); text-align: center;}

</style>
<body>
<div class="jisuan">
    <div class="pxtorem">
        <input type="text" class="px" value="640">
        <span class="px">px</span>    
        <span class="dy">=</span>
        <input type="text" class="rem" value="10">
        <span class="px">rem</span>
    </div>
    <script>
    (function(){
    /* 计算
    640px = 10rem
    1px = (10/640) rem
     */
    $("div.pxtorem input.px").blur(function(){
        $("div.pxtorem input.rem").val(Math.round($("div.pxtorem input.px").val()*(10/640)*10000)/10000);
    });
    })();
    </script>    
    <div class="remtopx">
        <input type="text" class="px" value="10">
        <span class="px">rem</span>    
        <span class="dy">=</span>
        <input type="text" class="rem" value="640">
        <span class="px">px</span>
    </div>
    <script>
    (function(){
    /* 计算
    10rem = 640px
    1rem = (640/10) px
     */
    $("div.remtopx input.px").blur(function(){
        $("div.remtopx input.rem").val(Math.round($("div.remtopx input.px").val()*(640/10)*10000)/10000);
    });
    })();
    </script>
</div>
<div class="two">
    <div class="twoTop">
        <div class="com">
            <div class="comTop" style="background:url('images/img1.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">天猫</div>
        </div>
        <div class="com">
            <div class="comTop" style="background:url('images/img2.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">聚划算</div>
        </div>
        <div class="com">
            <div class="comTop" style="background:url('images/img3.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">天猫国际</div>
        </div>
        <div class="com">
            <div class="comTop" style="background:url('images/img4.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">外卖</div>
        </div>
        <div class="com">
            <div class="comTop" style="background:url('images/img5.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">天猫超市</div>
        </div>
    </div>
    <div class="twoTop">
        <div class="com">
            <div class="comTop" style="background:url('images/img6.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">充值中心</div>
        </div>
        <div class="com">
            <div class="comTop" style="background:url('images/img7.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">飞猪旅行</div>
        </div>
        <div class="com">
            <div class="comTop" style="background:url('images/img8.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">淘金币</div>
        </div>
        <div class="com">
            <div class="comTop" style="background:url('images/img9.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">拍卖</div>
        </div>
        <div class="com">
            <div class="comTop" style="background:url('images/img10.png') no-repeat center center; background-size:contain;"></div>
            <div class="comBot">分类</div>
        </div>
    </div>
</div>
</body>

<script>
(function(){
// 改变
$(window).resize(function(){
    partCom();
});
partCom();
function partCom(){
    var winW = $(window).width();
    if(winW > 640) {winW = 640;}
    $('html').css('font-size', winW / 10);
};
/*var winW = $(window).width();
if (winW > 750) {winW = 750;}
$('html').css('font-size', winW / 7.5);
$(window).resize(function () {
    winW = $(window).width();
    if (winW > 750) {winW = 750;};
    $('html').css('font-size', winW / 7.5);
})*/
})();
</script>
</html>